<template>
  <div class="container">
    <el-card style="margin: 10px">
      <!-- head start-->
      <el-row type="flex" justify="space-between" align="middle">
        <el-col>
          <el-form
            ref="form"
            :model="formData"
            :inline="true"
            style="margin-left: 20px"
          >
            <el-form-item label="关键字">
              <el-input
                placeholder="根据编号搜索"
                style="width: 240px"
                v-model="formData.keyword"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col>
          <el-row type="flex" justify="space-between" align="middle">
            <el-col></el-col>
            <el-col :span="6">
              <el-button size="small" @click="clearFn">清除</el-button>
              <el-button size="small" type="primary" @click="searchFn">搜索</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- head  end -->
      <!-- 警示框start -->
      <el-alert
        :show-icon="true"
        :closable="false"
        :title="`数据一共${pageList.total}条`"
        type="info"
      />
      <!-- 警示框ned -->
      <!-- table表格start -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="id"
          width="200px"
          align="center"
          label="编号"
        ></el-table-column>
        <el-table-column
          prop="questionType"
          align="center"
          label="题型"
          :formatter="questionTypeFilter"
        ></el-table-column>
        <el-table-column width="200px" prop="" align="center" label="题目编号">
          <template slot-scope="{ row }">
            <div v-for="(item, index) in row.questionIDs" :key="index">
              <el-button style="height: 6px" type="text" @click="showDialogFn(row,index)">{{
                item.number
              }}</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          width="200px"
          prop="addTime"
          align="center"
          label="录入时间"
        ></el-table-column>
        <el-table-column
          prop="totalSeconds"
          align="center"
          label="答题时间(s)"
        ></el-table-column>
        <el-table-column
          prop="accuracyRate"
          align="center"
          label="正确率(%)"
        ></el-table-column>
        <el-table-column
          prop="userName"
          align="center"
          label="录入人"
        ></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button
          @click="delFn(row)"
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
            style="
              background-color: #fef0f0;
              color: #f7799f;
              border: 1px solid #f7799f;
            "
          ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- table表格end -->
      <!-- 分页start -->
      <el-row style="margin-top:15px" type="flex" justify="end" align="middle">
        <el-col :span="12">
          <el-pagination
            background
            layout="prev,pager,next,sizes,jumper"
            :total="pageList.total"
            :page-size="pageList.pagesize"
            :page-sizes="pageSizes"
            @current-change="currentChangeFn"
            @size-change="SizeChangeFn"
          >
          </el-pagination>
        </el-col>
      </el-row>
      <!-- 分页end -->
      <!-- 弹出层模块start -->
      <QuestionsPerview ref="QuestionsPerview"/>
      <!-- 弹出层模块end -->
    </el-card>
  </div>
</template>

<script>
// 导入获取所有table表格数据接口randoms  //导入根据id获取试题详情接口detail //导入根据id删除组题接口removeRandoms
import { randoms, detail, removeRandoms } from '@/api/hmmm/questions'
// 导入弹出层模块
import QuestionsPerview from '../components/questions-preview.vue'
export default {
  data () {
    return {
      // 定义page-sizes
      pageSizes: [20, 30, 50, 100],
      // 定义form表单数据
      formData: {
        keyword: ''
      },
      // 定义获取页面信息
      pageList: {
        page: 1,
        pagesize: 20,
        total: 0,
        keyword: ''
      },
      // 定义table数据
      tableData: []
    }
  },
  components: {
    // 注册弹出层模块
    QuestionsPerview
  },
  created () {
    // 页面加载获取所有表格数据
    this.getrandoms()
  },
  methods: {
    // 定义获取table表格数据函数
    async getrandoms () {
      const { data } = await randoms(this.pageList)
      this.tableData = data.items
      console.log(data)
      this.pageList.total = data.counts
    },
    // 过滤题目类型
    questionTypeFilter (row) {
      if (row.questionType === '1') {
        return '单选题'
      } else if (row.questionType === '2') {
        return '多选题'
      } else if (row.questionType === '3') {
        return '简答题'
      }
    },
    // 点击试题编号弹出层
    async showDialogFn (row, index) {
      console.log(row, index)
      const { data } = await detail({ id: row.questionIDs[index].id })
      // 根据数值判断题目类型start
      if (data.questionType === '1') {
        data.questionType = '单选题'
      } else if (data.questionType === '2') {
        data.questionType = '多选题'
      } else if (data.questionType === '3') {
        data.questionType = '简答题'
      }
      // 根据数值判断题目类型end
      // 根据数值判断题目难易程度start
      if (data.difficulty === '1') {
        data.difficulty = '简单'
      } else if (data.difficulty === '2') {
        data.difficulty = '一般'
      } else if (data.difficulty === '3') {
        data.difficulty = '困难'
      }
      // 根据数值判断题目难易程度end
      this.$refs.QuestionsPerview.rowData = data
      this.$refs.QuestionsPerview.rowData.subject = data.subjectName
      this.$refs.QuestionsPerview.rowData.catalog = data.directoryName
      this.$refs.QuestionsPerview.articleInfo = data
      this.$refs.QuestionsPerview.questions = data.options
      this.$refs.QuestionsPerview.showDialog = true
    },
    // 点击清除  重置搜索框
    clearFn () {
      this.formData = {
        keyword: ''
      }
    },
    // 点击搜索  筛选符合条件的内容
    async searchFn () {
      this.pageList.keyword = this.formData.keyword
      this.getrandoms()
    },
    // 当页码发生改变时触发
    currentChangeFn (val) {
      this.pageList.page = val
      this.getrandoms()
    },
    // 当每页条数发生改变时
    SizeChangeFn (val) {
      this.pageList.pagesize = val
      this.getrandoms()
    },
    // 点击删除时触发
    async delFn (row) {
      await this.$confirm('此操作将永久删除该组题，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      const result = await removeRandoms(row)
      console.log(result)
      this.$message.success('删除成功')
      this.getrandoms()
    }
  }
}
</script>

<style scoped lang='less'></style>
